<template>
	<view class="page">
		<!-- 邀请入驻信息 wwl -->
		<view class="list_info">
			<view class="row_info">
				<view class="left">
					选择身份
				</view>
				<view class="right">
					<text>{{info.identity}}</text>
				</view>
			</view>
			<view class="row_info">
				<view class="left">
					选择地区
				</view>
				<view class="right">
					<text>{{info.region}}</text>
				</view>
			</view>
			<view class="row_info">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<text>{{info.name}}</text>
				</view>
			</view>
			<view class="row_info">
				<view class="left">
					联系电话
				</view>
				<view class="right">
					<text>{{info.phone}}</text>
				</view>
			</view>
			<view class="row_info">
				<view class="left">
					办公地址
				</view>
				<input type="text"  class="right_input" v-model="info.office_address" placeholder="请输入办公地址" placeholder-style="color:#D5D5D5;font-size:28rpx" />
			</view>
			<view class="row_info">
				<view class="left">
					其他联系电话
				</view>
				<input type="text" maxlength="15" class="right_input" v-model="info.other_phone" placeholder="请输入其他联系电话" placeholder-style="color:#D5D5D5;font-size:28rpx" />
			</view>
			<view class="row_info1">
				<view class="left">
					上传身份证人脸面
				</view>
			</view>
			<view class="row_image" @click="setPhoto(2)" :class="!info.idcard_back ?  'row_image2':''">
				<image class="image" :src="info.idcard_back" mode="scaleToFill" v-if='info.idcard_back'></image>
				<block v-else>
					<image class="image" :src="require('../static/invitation_idcard_01.png')" mode="scaleToFill"></image>
				</block>
			</view>
			<view class="row_info1">
				<view class="left">
					上传身份证国徽面
					<!-- 上传身份证正面 -->
				</view>
			</view>
			<view class="row_image" @click="setPhoto(1)" :class="!info.idcard_just ?  'row_image2':''">
				<image class="image" :src="info.idcard_just" mode="scaleToFill" v-if='info.idcard_just'></image>
				<block v-else>
					<image class="image" :src="require('../static/invitation_idcard_02.png')" mode="scaleToFill"></image>
				</block>
			</view>
		</view>
		<view class="button_box" v-if="id">
			<button  class="button" @click='onSave()' :loading="loading">提交审核</button>
		</view>
		<u-popup v-model="visible" mode='center' height="auto" >
			<view class="reject_popup">
				
				<image :src="require('../static/invitation_success.png')" mode="scaleToFill" class="image"></image>
				<image  :src="require('../static/invitation_close.png')" mode="scaleToFill" class="icon" @click="visible = false"></image>
			</view>
		</u-popup>
		<u-popup v-model="failVisible" mode='center' width="80%" height="auto">
			<view class="reject_popup2">
				<view class="title">
					<text class="title_text" >提示</text>
					<!-- <view  class="icon" @click='onCloseReject()'>
						<n-icon name="close" size="38" color="#666"></n-icon>
					</view> -->
				</view>
				<view class="text">打开链接有误，请重新尝试</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getInviteInfo ,setRleApply} from './api.js'
	// import cityOptions from '../../components/cityOptions.vue'
	import uPopup from '@/components/u-popup.vue'
	export default {
		components:{uPopup},
		data() {
			return {
				failVisible:false,
				isRegions:false,
				isInfo:false,
				visible:false,
				loading:false,
				info: {
					identity: null,
					region: null,
					regionName:null,
					name: null,
					phone: null,
					office_address: null,
					office_addressName:null,
					other_phone: null,
					idcard_back: null,
					idcard_just: null
				},
				id:null,
			}
		},
		onLoad(params) {
			this.id = params.id
			if(!this.id) return  this.failVisible = true
			if(!this.$store.state.userInfo && params.invitation_code && params.invitation_code != 'null'){
				this.$store.commit('setInvitationCode', params.invitation_code)
				// uni.setStorageSync('TZ_invitation_code', params.invitation_code) 
			}else{
				this.$store.commit('setInvitationCode', null)
				// uni.removeStorageSync('TZ_invitation_code')
			}
			this.getInfo()
		},
		methods: {
			async getInfo(){
				try{
					var res = await getInviteInfo({id:this.id})
					this.info.identity = res.role_name
					this.info.region = res.zone_name
					this.info.name = res.name
					this.info.phone = res.phone
				}catch{}
			},
			async onSave(){
				if(!this.info.office_address) return uni.showToast({title:'请输入办公地址',icon:'none'})
				if(!this.info.other_phone) return uni.showToast({title:'请输入其他联系电话',icon:'none'})
				if(!(/^1[3-9]\d{9}$/.test(this.info.other_phone))){
					return uni.showToast({
						title: '其他联系电话输入错误',
						icon: 'none'
					});
				}
				if(!this.info.idcard_back) return uni.showToast({title:'上传身份证人脸面',icon:'none'})
				if(!this.info.idcard_just) return uni.showToast({title:'上传身份证国徽面',icon:'none'})
				this.loading = true
				try{
					var res = await  setRleApply({
						id:this.id,
						address:this.info.office_address,
						id_card_f:this.info.idcard_back,
						id_card_z:this.info.idcard_just,
						other_phone:this.info.other_phone
					})
					
					if(res.code == 1){
						return uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					
					
					this.loading = false
					this.visible = true
				}catch{
					this.loading = false
				}
				
			},
			setPhoto(type) {
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						this.$upload(res.tempFilePaths[0]).then(result =>{
							if(result.code == 200){
								if (result.code == 200)  type == 1 ?this.info.idcard_just = result.data.img : this.info.idcard_back = result.data.img
							}
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #fff;
	}
	.list_info{
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
		.row_info2{
			padding: 30rpx 0 ;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color:#26252A;
			display: flex;
			justify-content: space-between;
			.left{
				line-height: 40rpx;
			}
			.right{
				width: calc(100% - 7em);
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.right_text{
					width: calc(100% - 20rpx);
					text-align: right;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				.right_text2{
					width: calc(100% - 20rpx);
					color:#D5D5D5;
				}
			}
		}
		.row_info{
			padding: 30rpx 0 ;
			border-bottom: 2rpx solid #ebebef;
			font-size: 28rpx;
			color:#26252A;
			display: flex;
			justify-content: space-between;
			.left{
				line-height: 40rpx;
			}
			.right{
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.right_input{
				width: calc(100% - 7em);
				text-align: right;
				font-size: 28rpx;
				color:#26252A;
				line-height: 40rpx;
			}
		}
		.row_info1{
			padding: 30rpx 0 ;
			font-size: 28rpx;
			color:#26252A;
		}
		.row_image{
			width: 100%;
			height: 436rpx;
			background: #ffffff;
			border: 2rpx dashed #d5d5d5;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			.image{
				width: 506rpx;
				height: 326rpx;
			}
			.icon{
				position: absolute;
				width: 152rpx;
				height: 152rpx;
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	.row_image2{
		background-color: #efefef!important;
	}
	.button_box{
		padding: 90rpx 0 ;
	}
	.button{
		width: 674rpx;
		margin: 0 auto;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(270deg,#ff7a1f, #ff9760);
		border-radius: 16rpx;
		color:#FFFFFF;
		font-size: 30rpx;
	}
	.reject_popup2{
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx 30rpx;
			width: 100%;
			box-sizing: border-box;
			position: relative;
			.title{
				height: 60rpx;
				line-height: 40rpx;
				padding: 30rpx;
				text-align: center;
				position: relative;
				.title_text{
					font-size: 34rpx;
					font-weight: 700;
				}
				.icon{
					position: absolute;
					right: 20rpx;
					top:0%;
				}
			}
			.text{
				padding: 0 0 40rpx;
				font-size: 30rpx;
				line-height: 40rpx;
				text-align: center;
				color:#26252A
			}
		}
		.reject_popup{
			// background-color: #fff;
			position: relative;
			height: 500rpx;
			.image{
				width: 512rpx;
				height: 330rpx;
			}
			.icon{
				position: absolute;
				bottom: 0 ;
				left: 50%;
				transform: translateX(-50%);
				width: 51rpx;
				height: 51rpx;
			}
			
		}
</style>
